<!DOCTYPE html>
<html lang="en">

<head>
    <title>Happy Birthday To MianDa</title>
    <meta name="viewport" charset="utf-8" content="width=device-width,
    initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=1.0">
    <link rel="stylesheet" href="css/app.css">
    <script src="js/app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js" defer></script>
    <audio id="bgm" src="SmallHappiness.mp3" loop="loop"></audio>
</head>

<body>
    <div class="container">
        <div id="pageloading">
            <center>
                <img src="images/loading.gif" style="width: 20%;">
                <h2 style="font-size: 10px;color: #FFFFFF">Loading...</h2>
            </center>
        </div>        
        <div id="viewport" class="viewport">
            <div class="pageview"
                style="background-image: url(images/img01.webp); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center class="pagecontent">
                    <h1 style="font-size: 50px;color: #FFFFFF">Hello</h1>
                    <h2 style="font-size: 45px;color: #FFFFFF">MianDa</h2>
                    <h3 style="font-size: 30px;color: #FFFFFF">To : 我星星宇宙和全世界</h3>
                </center>
            </div>
            <div class="pageview"
                style="background-image: url(images/img02.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center class="pagecontent">
                    <h1 style="font-size: 30px;color: #FFFFFF">"一起去看日出吧！"</h1>
                    <h2 style="font-size: 20px;color: #FFFFFF">2023夏<br><br>我们相伴在学校备战考研<br>休息日的那天一起去白云山看了日出<br>阴云密布的天空本以为会错过<br>看到云层中露出的小太阳<br>我俩开心的像小朋友</h2>
                </center>
            </div>
            <div class="pageview"
                style="background-image: url(images/img03.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center class="pagecontent">
                    <h1 style="font-size: 30px;color: #FFFFFF">"有亿点点想你"</h1>
                    <h2 style="font-size: 20px;color: #FFFFFF">2023秋-冬<br><br>分隔两地备战考研的我们<br>思绪总会忍不住飞向对方<br>"我们一起在各自的地方加油！"</h2>
                </center>
            </div>
            <div class="pageview"
                style="background-image: url(images/img04.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center class="pagecontent">
                    <h1 style="font-size: 30px;color: #FFFFFF">"一起去泡温泉"</h1>
                    <h2 style="font-size: 20px;color: #FFFFFF">2024早春<br><br>考研结束<br>一直和宝贝心心念念的温泉行我们来辣！<br><br>溜到大山里<br>有宝贝准备的惊喜和美景（涩涩bushi </< /h2>
                </center>
            </div>
            <div class="pageview"
                style="background-image: url(images/img05.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center class="pagecontent">
                    <h1 style="font-size: 30px;color: #FFFFFF">"复试加油！"</h1>
                    <h2 style="font-size: 20px;color: #FFFFFF">
                        2024晚春<br><br>等待成绩和准备复试的日子紧张又窒息<br>图书馆、实训室<br><br>休息时走在路上看到前面的爷爷奶奶<br>我们也默默靠紧彼此</h2>
                </center>
            </div>
            <div class="pageview"
                style="background-image: url(images/img06.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center class="pagecontent">
                    <h1 style="font-size: 30px;color: #FFFFFF">"一起从黑袍到蓝袍"</h1>
                    <h2 style="font-size: 20px;color: #FFFFFF">2024夏<br><br>和面哒一起上岸的毕业季<br>一直梦想的场景<br>要和宝贝一起从黑袍到蓝袍！</h2>
                </center>
            </div>
            <div class="pageview"
                style="background-image: url(images/img07.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center class="pagecontent">
                    <h1 style="font-size: 30px;color: #FFFFFF">"一起拍写真！"</h1>
                    <h2 style="font-size: 20px;color: #FFFFFF">
                        2024夏<br><br>镜头前的我们有些羞涩<br>拉着宝贝偷偷私奔<br><br>这是面哒送给猪猪最棒的毕业礼物！</h2>
                </center>
            </div>
            <div class="pageview"
                style="background-image: url(images/img08.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: 100%;">
                <center style="margin-top: 20%">
                    <h1 style="font-size: 30px;color: #FFFFFF">"生日快乐!"</h1>
                    <h2 style="font-size: 20px;color: #FFFFFF">22岁的小面
                        你好<br>我是猪猪<br><br>谢谢这么长时间的关心和陪伴<br>未来也想一直陪宝贝过许多许多生日！<br><br>一点心意<br>希望宝贝喜欢<br></h2>
                    <h3>2024-6-23</h3>
                </center>
            </div>
        </div>
        <div id="pagenumber" class="pagenumber">
            <div></div>
            <div></div>
        </div>
        <a href="javascript:play();"><img src="images/pause.png" width="7%" id="playbtn" border="0"></a>
    </div>
</body>

</html>